<template>
<div>
  <!--  弹窗-->
    <el-form :model="form" :rules="rules" ref="formref" >
      <el-form-item label="订单编号：" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.no" autocomplete="off"  style="width: 50%;float:left;"></el-input>
      </el-form-item>
      <el-form-item label="商品名称："  :label-width="formLabelWidth" prop="area">
        <el-input v-model="form.goodsName" autocomplete="off" style="width: 50%;float:left;"></el-input>
      </el-form-item>
      <el-form-item label="下单电话：" :label-width="formLabelWidth" prop="customPhone">
        <el-input v-model="form.goodsName" autocomplete="off" style="width: 50%;float:left;"></el-input>
      </el-form-item>
      <el-form-item label="配送地址："  :label-width="formLabelWidth" prop="shippingAddress">
        <el-input v-model="form.shippingAddress" autocomplete="off" style="width: 50%;float:left;"></el-input>
      </el-form-item>
      <el-form-item label="官方语言："  :label-width="formLabelWidth" prop="language">
        <el-input v-model="form.language" autocomplete="off" style="width: 50%;float:left;"></el-input>
      </el-form-item>
      <el-form-item label="店铺名称："  :label-width="formLabelWidth" prop="shopName">
        <el-input v-model="form.shopName" autocomplete="off" style="width: 50%;float:left;"></el-input>
      </el-form-item>
<!--      <el-form-item label="商品类型："  :label-width="formLabelWidth" prop="goodsType">-->
<!--        <el-input v-model="form.goodsType" autocomplete="off" style="width: 50%;float:left;"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="商品数量："  :label-width="formLabelWidth" prop="goodsNum">
        <el-input v-model="form.goodsNum" autocomplete="off" style="width: 50%;float:left;"></el-input>
      </el-form-item>
      <el-form-item label="订单价值："  :label-width="formLabelWidth" prop="goodsAmount">
        <el-input v-model="form.goodsAmount" autocomplete="off" style="width: 50%;float:left;"></el-input>
      </el-form-item>
      <el-form-item label="订单状态："  :label-width="formLabelWidth" prop="state">
        <el-radio-group v-model="form.state" style="width: 50%;float:left;">
          <el-radio label="已完工"></el-radio>
          <el-radio label="已撤销"></el-radio>
          <el-radio label="超时完工"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="完工时间：" :label-width="formLabelWidth" prop="completionTime">
        <el-date-picker
            v-model="form.completionTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            style="width: 50%;float:left;">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="diaSave">确 定</el-button>
    </div>
</div>
</template>

<script>
export default {
  name: "editHistoricalOrders",
  data(){
    return{
      form:{
        id:'',
        no:'',
        orderTime:'',
        goodsName:'',
        customPhone:'',
        shippingAddress:'',
        shopName:'',
        goodsNum:'',
        goodsAmount:'',
        state:'',
        completionTime:'',
        courier:'',
        remark:'',
      },
      dialogFormVisible:false,
          formLabelWidth:'150px',
          rules: {
            no: [
              { required: true, message: '请输入订单编号', trigger: 'blur' },
            ],
            orderTime: [
              { required: true, message: '请输入下单时间', trigger: 'blur' },
            ],
            goodsName: [
              { required: true, message: '请输入商品名称', trigger: 'blur' },
            ],
            goodsNum: [
              { required: true, message: '请输入货币', trigger: 'blur' },
              // { validator: checkGoodsNum, trigger: 'blur' }
            ],
            customPhone: [
              { required: true, message: '请输入下单电话', trigger: 'blur' },
            ],
            shippingAddress: [
              { required: true, message: '请输入配送地址', trigger: 'blur' },
              // { validator: checkPopulation, trigger: 'blur' }
            ],
            shopName: [
              { required: true, message: '请输入店铺名称', trigger: 'blur' },
            ],
            goodsAmount: [
              { required: true, message: '请输入订单金额', trigger: 'blur' },
            ],
            state: [
              { required: true, message: '请输入订单状态', trigger: 'blur' },
            ],
            conId: [
              { required: true, message: '请选择所在洲', trigger: 'blur' },
            ],

      },
    }
  },
  methods:{
    diaSave(){
      this.$refs.formref.validate( async (valid) => {

        if (valid) {
          let url
          if(this.form.id===''){
            url='/historicalOrders/save'
          }else {
            url='/historicalOrders/modify'
          }
          let resp = await this.$axios.get(url,{
            params:this.form
          })
          if(resp.data.code===200){
            this.query()
            this.$router.push('/historicalOrders')
          }else{
            alert('编辑失败')
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
}
</script>

<style scoped>

</style>